<template>
  <div>
    <h1>Create an event</h1>
    <form>
      <BaseSelect
        label="Select a category"
        :options="categories"
        v-model="event.category"
      />

      <fieldset>
        <legend>Name & describe your event</legend>
        <BaseInput label="Title" v-model="event.title" />
        <BaseInput label="Description" v-model="event.description" />
      </fieldset>

      <fieldset>
        <legend>Where is your event?</legend>
        <BaseInput label="Location" v-model="event.location" />
      </fieldset>

      <fieldset>
        <legend>Pets</legend>
        <p>Are pets allowed?</p>
        <BaseRadioGroup :options="petOptions" v-model="event.pets" />
      </fieldset>

      <fieldset>
        <legend>Extras</legend>
        <BaseCheckbox label="Catering" v-model="event.extras.catering" />
        <BaseCheckbox label="Live music" v-model="event.extras.music" />
      </fieldset>

      <button class="button -fill-gradient" type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        'sustainability',
        'nature',
        'animal welfare',
        'housing',
        'education',
        'food',
        'community',
      ],
      petOptions: [
        { label: 'Yes', value: 1 },
        { label: 'No', value: 0 },
      ],
      event: {
        category: '',
        title: '',
        description: '',
        location: '',
        pets: 1,
        extras: {
          catering: false,
          music: false,
        },
      },
    }
  },
}
</script>

<style scoped>
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}
</style>
